<template>
	<view class="content" :style="{ 'background-image': 'url('+tabs[tabIndex]['bgsrc']+')',
		'background-repeat':' no-repeat',
		'background-size': '100% 100%' }" @click="hideDetail">
		<view class="tabs">
			<view v-for="(item,index) in tabs" :key="index" :class='[tabIndex==index?"active":"","tab-item"]'  @click="changeTabs(index)">
				{{item.name}}
				<!-- <image v-if="tabIndex==index" :src="item.iconActive" mode="heightFix"></image> -->
				<!-- <image v-else :src="item.icon" mode="heightFix"></image> -->
			</view>
		</view>
		<view class="gd" v-show="tabIndex == 0">
			<view v-for="(item,index) in titles" :class="'card'+(index+1)">
				<image v-show="!item.gifStatus" :src="item.src" mode="" @click="changeGdDetails(item)"></image>
				<image v-show="item.gifStatus" @load="gifLoad" :src="item.gifsrc" mode="" @click="changeGdDetails(item)"></image>
				<div v-if="item.status" :class='["bubble","bubble-top"+index]'>
					<time-line :list="item.content" ref="timeline" location="right" :title="item.text"></time-line>
				</div>
			</view>
		</view>
		<view class="cp" v-show="tabIndex == 1">
			<view v-for="(item,index) in menuList" :key="'menu-'+index" :class="item.class" >
				<image v-if="item.type == '1'" :src="item.iconjt" mode="" class="jt"></image>
				<image :src="item.icon" mode="" class="cm-icon" @click="changeMenuDetails(item)"></image>
				<image v-if="!item.type" :src="item.iconjt" mode="" class="jt"></image>
				<div  v-if="item.status" :class='["bubble1","menu-bubble"+index]'>
					<time-line :list="item['content']" ref="timeline" location="right" :title="item.text"></time-line>
				</div>
			</view>
		</view>
		<view class="" v-show="tabIndex == 2">
			<view class="yc">
				<image src="../../static/bdcx/yc.png" mode="" class="cm-icon" @click="ycDetail"></image>
				<image src="../../static/bdcx/ycjt.png" mode="" class="jt"></image>
				<div :class='["bubble1","menu-bubble-yc"]' v-show="yc.status">
					<time-line :list="yc.content" ref="timeline" location="right" :title="yc.text"></time-line>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import timeLine from '../../components/xuan-timeLine/xuan-timeLine.vue'
	export default {
		data() {
			return {
				tabs: [{
						name: "人口迁移与饮食交融",
						bgsrc:"../../static/dt1.png",
						icon:"../../static/tabs/rkqy.png",
						iconActive:"../../static/tabs/rkqyxz.png",
					},
					{
						name: "八大菜系",
						bgsrc:"../../static/bdcx.png",
						icon:"../../static/tabs/bdcx.png",
						iconActive:"../../static/tabs/bdcxxz.png",
					},
					{
						name: "豫菜",
						bgsrc:"../../static/ycdt.png",
						icon:"../../static/tabs/yc.png",
						iconActive:"../../static/tabs/ycxz.png",
					},
				],
				tabIndex:0,
				titles: [{
						name: 'l',
						text: "大辽历史时间轴",
						src: "../../static/x.png",
						gifsrc: "../../static/x1.gif",
						audiosrc:"../../static/yp/liao.mp3",
						status: false,
						gifStatus:false,
						content: [
							{
								title: '',
								title_span: '',
								content: "辽代是中国历史上的一个重要时期，存在于公元907年至1125年。在这个时期，人口迁移与饮食文化的交融受到了多种因素的影响，包括政治、经济、军事等。由于历史资料的有限性，以下是一些可能的历史事件和其对饮食文化的影响的概述："
							},{
								title: '建立辽国（907年）',
								title_span: '',
								content: "随着辽国的建立，来自不同地区的人口可能会涌入新的国家。这可能导致了一些不同地区的饮食传统在辽国地区的融合，形成了新的饮食文化。"
							},
							{
								title: '北汉与辽的冲突（951年-979年）',
								title_span: '',
								content: "辽与北汉之间的冲突可能导致了一些边疆地区的人口流动。这些流动的人口可能带来了他们自己地区的饮食文化，与辽国原有的饮食传统相互影响。"
							},
							{
								title: '辽与北宋的交往（10世纪中期至11世纪初）',
								title_span: '',
								content: "辽与北宋之间的交往可能导致了一些文化的交流，包括饮食文化。这一时期可能有一些来自北方和南方的食材和烹饪技巧在辽国地区的交流。"
							},
							{
								title: '辽国灭亡（1125年）',
								title_span: '',
								content: "随着辽国的灭亡，金朝的崛起和西夏的建立，一些辽国人可能被迫迁徙到其他地区，而一些新的统治者和居民可能进入辽国地区。这一时期的人口迁移可能导致了更广泛的饮食文化的交融。"
							},
							{
								title: '概述',
								title_span: '',
								content: "在这些时间节点下，人口迁移对饮食文化的影响主要表现为不同地区的食材、调味料和烹饪技巧的交流。这种交流促成了饮食文化的多元化和丰富化。在历史的长河中，各个朝代的兴衰、政治的变迁都在一定程度上影响了人口流动，进而影响了各地的饮食文化。需要注意的是，这些描述是基于历史研究的一般性了解，实际情况可能更为复杂和多样。"
							}
						]
					},
					{
						name: 'xx',
						text: "西夏历史时间轴",
						src: "../../static/xx.png",
						gifsrc: "../../static/xx1.gif",
						audiosrc:"../../static/yp/xixia.mp3",
						status: false,
						gifStatus:false,
						content: [
							{
								title: '',
								title_span: '',
								content: "西夏是中国历史上的一个独立政权，存在于北宋末期至金朝初期（1038年-1227年）。在这一时期，西夏人口迁移的历史事件主要涉及西夏王国与邻近地区的关系。由于相关历史记录相对有限，以下是对一些可能的人口迁移事件和其对饮食文化的影响的概述："
							},{
								title: '西夏建立（1038年）',
								title_span: '',
								content: '西夏建立后，可能发生了一些来自中原地区和周边地区的人口迁移，包括一些农民、手工业者和士人。这可能导致西夏地区的饮食文化开始受到中原地区的影响，带来了一些新的食材和烹饪技巧。'
							},
							{
								title: '靖康之役（1040年-1044年）',
								title_span: '',
								content: "靖康之役可能导致北方一些人口南渡，其中可能包括一些与西夏有关的人群。这可能引入了一些北方饮食的元素，对西夏地区的饮食文化产生了一定的影响。"
							},
							{
								title: '金朝对西夏的征伐（1205年-1209年）',
								title_span: '',
								content: "金朝对西夏的征伐可能导致了一些人口的流动，尤其是在战乱期间。这可能使一些西夏人迁移到周边地区，带着他们的饮食传统。同时，可能有一些周边地区的人群迁入西夏，促使不同文化的交流。"
							}, {
								title: '西夏灭亡（1227年）',
								title_span: '',
								content: "随着西夏的灭亡，一些西夏人可能被金朝或其他政权迫使迁徙，这可能引起了一系列的人口流动。这种人口迁移可能导致了西夏人的饮食文化与其他地区的饮食文化融合，形成了一些新的料理风格。"
							},
							{
								title: '概述',
								title_span: '',
								content: "总的来说，西夏时期的人口迁移对饮食文化产生了影响，促使了不同地区饮食传统的交流和融合。可能出现了新的食材、调味料以及烹饪技巧的结合，形成了具有独特地方特色的饮食文化。由于历史资料的有限性，上述描述仅为概括，实际影响可能更为复杂和多样。"
							},
						]
					},
					{
						name: 'sc',
						text: "宋朝历史时间轴",
						src: "../../static/s.png",
						gifsrc: "../../static/s1.gif",
						audiosrc:"../../static/yp/song.mp3",
						gifStatus:false,
						status: false,
						content: [
							{
									title: '',
									title_span: '',
									content: '北宋时期（960年-1127年）是中国历史上一个繁荣的时期，也涌现了一系列的人口迁移事件，其中一些对饮食文化的交融产生了影响。以下是一些关键时间节点和可能的影响：'
							},{
								title: '建立宋朝（960年）',
								title_span: '',
								content: '随着宋朝的建立，政治稳定和经济繁荣可能导致了一些人口的迁移。这一时期，北方的一些居民可能向南方迁徙，带来了北方的饮食传统。南方和北方的食材、烹饪技巧可能开始交流融合。'
							},
							{
								title: '北方与南方的交流（10世纪末-11世纪初）',
								title_span: '',
								content: '北方与南方之间的政治交往和商业交流逐渐增加，这可能导致了一些人口的流动。这一时期可能有更多的北方风味和南方风味在不同地区的饮食文化中融合。'
							},
							{
								title: '1040年-1044年',
								title_span: '',
								content: '靖康之役是北宋时期的一场重大战争，导致了金朝的入侵和对北宋都城汴梁的占领。这场战争可能导致了大规模的人口迁移和流离失所。'
							},
							{
								title: '靖康之役（1127年）',
								title_span: '',
								content: '靖康之役导致了南宋的建立，这一时期北方一些人口可能被战乱迫使南渡。这些北方人的饮食习惯可能与南方本地传统相互影响，形成新的饮食文化元素。'
							},
							{
								title: '南宋时期（1127年-1279年）',
								title_span: '',
								content: '在南宋时期，由于政治相对稳定，商业繁荣，可能有更多的人口流动。南北方的饮食文化元素可能更加混合，形成了更为复杂的口味和烹饪技巧。'
							},
							{
								title: '概述',
								title_span: '',
								content: `这些人口迁移事件对饮食文化的影响主要表现为以下几个方面：
									食材的交流： 不同地区的食材可能在人口迁移的过程中被引入，促使了食材的交流与融合。
									烹饪技巧的融合： 不同地区的烹饪技巧可能在交流中互相学习，形成新的烹饪方式和手法。
									口味的调和： 北方和南方口味的交融使得饮食口味更加多样，人们可能更容易接受其他地区的独特风味。
									总体而言，这些人口迁移事件推动了中国不同地区饮食文化的交流与融合，形成了具有多元特色的饮食传统。`
							},
						]
					},
				],
				menuList:[
					{
						class:"sc",
						icon:"../../static/bdcx/cc.png",
						iconjt:"../../static/bdcx/ccjt.png",
						text:"川菜的发展历史",
						status: false,
						audiosrc:"../../static/yp/chuan.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "川菜，中国八大菜系之一，起源于四川地区，其发展历史跨足多个时期，呈现出丰富多彩的特色。"
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: "川菜的发展根植于古代川地的饮食文化，开始形成独特的调味风格。四川地区的气候和地理环境为川菜的发展提供了丰富的食材。"
							},
							{
								title: '秦汉时期',
								title_span: '',
								content: "在秦汉时期，川菜逐渐形成初步特色。四川盆地的气候湿润，以及丰富的山水资源，为川菜的发展提供了有力支持。川味小吃和调味品的雏形逐渐形成。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "唐宋时期，四川成为政治和文化中心，川菜得到更多的发展机遇。川味鲜明的小吃和独特的烹饪技法开始崭露头角，如麻辣火锅的雏形便在这一时期初现。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "元明清时期，川菜逐渐吸收外来文化的影响，形成更为复杂的烹饪体系。麻辣味、鲜香口味深受人们喜爱，代表性菜品如宫保鸡丁、水煮鱼等开始形成。"
							},
							{
								title: '民国时期',
								title_span: '',
								content: " 在民国时期，川菜进入了现代化阶段。川味小吃如夫妻肺片、辣子鸡等成为当地餐桌上的佳肴。此时期的川菜以独特的口味和创新为特色。"
							},
							{
								title: '新中国时期',
								title_span: '',
								content: "新中国时期，川菜成为中国饮食文化的重要代表之一。川菜的麻辣火锅成功走向国际，为川菜在全球的传播做出了贡献。"
							},
							{
								title: '川菜的文化特色',
								title_span: '',
								content: `1. 麻辣风味： 川菜以麻辣为主要口味，辣椒、花椒成为调味品的重要组成部分，为川菜赋予独特的风味。
										<br />2. 丰富调味： 川菜注重调味品的使用，以酱油、醋、豆瓣酱等多种调味料为基础，使菜品更加美味可口。
										<br />3. 多样小吃： 川味小吃琳琅满目，如香辣兔、酸辣粉、夫妻肺片等，丰富多样，满足了人们对口味的不同需求。
										<br />4. 独特烹饪技法： 川菜以烹饪技法见长，如火锅、爆炒、红烧等手法，呈现出多种多样的菜品风貌。
										川菜文化融合了地域的自然环境、历史文化，形成了独具特色的饮食文化体系，代表性的川味更是成为中国饮食文化的一张名片。
										`
							},
						]
					},
					{
						class:"xc",
						icon:"../../static/bdcx/xc.png",
						iconjt:"../../static/bdcx/xcjt.png",
						status: false,
						text:"湘菜的发展历史",
						audiosrc:"../../static/yp/xiang.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "湘菜，中国八大菜系之一，起源于湖南省，经过漫长的历史发展，形成了丰富多彩的饮食文化。"
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: "湖南地区地势复杂，水域众多，为湘菜的发展提供了丰富的食材基础。先秦至战国时期，湖南地区的烹饪文化逐渐形成，湘菜的初步特色开始显现。"
							},
							{
								title: '秦汉时期',
								title_span: '',
								content: "在秦汉时期，湖南成为政治、文化中心，湘菜吸收了中原文化的影响，形成了更为多元的菜系，烹饪技法开始逐渐成熟。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "唐宋时期，湖南地区繁荣兴盛，湘菜得以进一步发展。湘菜逐渐形成了独特的烹饪风格，讲究菜品的鲜嫩、香辣。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在这一时期，湘菜得到了进一步的发展。湖南地区的土特产，如辣椒、豆豉等，被广泛应用于菜品中，形成了湘菜独有的麻辣口味。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "近现代，湖南地区的烹饪业逐渐现代化，湘菜在全国范围内也得到了更广泛的认可。湘菜的辣味成为了其最为显著的特征之一。"
							},
							{
								title: '湘菜的文化特色',
								title_span: '',
								content: `1.	辣而不燥： 湘菜以“辣而不燥”为特色，注重调味的平衡，辣味既浓烈又清新，突显湖南地区的独特气息。
											<br />2.	原汁原味： 湘菜讲究原汁原味，强调食材的新鲜和原始味道，以保留食材的本真为目标。
											<br />3.	独特酱料： 湘菜的酱料独特，以豆豉、辣椒酱为主，赋予菜品独特的风味，突显湘菜的独特性。
											<br />4.	采用当地食材： 湘菜注重采用本地的特产，如洞庭湖的鱼类、湖南的猪肉等，体现了湖南地区丰富的食材资源。
											<br />5.	宴席文化： 湖南地区的宴席文化丰富多彩，讲究场合和人际关系，湘菜在宴席上表现出丰富多样的特色。
											湘菜以其鲜明的地方特色和独特的辣味，成为中国饮食文化中的瑰宝，也是中华美食的杰出代表。
											`
							},
						]
					},
					{
						class:"yuec",
						icon:"../../static/bdcx/yuec.png",
						iconjt:"../../static/bdcx/yuecjt.png",
						status: false,
						text:"粤菜的发展历史",
						audiosrc:"../../static/yp/yue.mp3",
						content:[
							{
								title:"",
								title_span: '',
								content:"粤菜，作为中国八大菜系之一，起源于广东省，具有悠久的历史和独特的文化传承。"
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: "粤菜的历史可追溯到先秦时期，当地的烹饪技艺逐渐形成，得益于广东丰富的水产和农产品。"
							},
							{
								title: '秦汉时期',
								title_span: '',
								content: " 随着秦汉时期政治中心南迁，广东成为经济繁荣之地，粤菜开始形成初步特色。独特的调味品和烹饪手法逐渐形成。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "在唐宋时期，广东作为海外贸易重镇，不仅吸收了南洋风味，还形成了独具特色的粤菜文化。深厚的历史积淀成为粤菜文化的基石。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在这一时期，粤菜得到了进一步的发展。广东地区由于气候湿润，人们更注重食材的原汁原味，保留了菜品的鲜美。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "进入近现代，广东地区经济飞速发展，成为开放的窗口。粤菜在国内外的影响逐渐扩大，传统与现代的融合成为粤菜发展的新方向。"
							},
							{
								title: '粤菜的文化特色',
								title_span: '',
								content: `1.	鲜美口感： 粤菜以鲜、嫩、爽为特色，注重保持食材的原汁原味，突出食材的新鲜和口感。
									<br />2.	调味精致： 粤菜的调味料独特，以酱油、蚝油、糖等为基础，讲究味型的平衡和调和。
									<br />3.	烹饪技法： 粤菜注重烹调技法，擅长清蒸、炖、红烧等手法，独特的炖品如广式炖汤被广泛传承。
									<br />4.	多元影响： 由于广东地理位置特殊，粤菜吸收了南洋、西方等多元文化影响，形成了独具魅力的国际化特色。
									<br />5.	宴席文化： 粤菜在宴席文化方面有着独到之处，海鲜大宴、点心宴等都是粤式宴会的代表。
									粤菜以其鲜美的口感、精致的调味和丰富的烹饪技法，成为中国饮食文化中的瑰宝，也是中华美食在国际上的重要代表。
									`
							},
						]
					},
					{
						class:"mc",
						icon:"../../static/bdcx/mc.png",
						iconjt:"../../static/bdcx/mcjt.png",
						status: false,
						text:"闽菜的发展历史",
						audiosrc:"../../static/yp/min.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "闽菜，中国八大菜系之一，源自福建省，经过漫长的历史发展，形成了独特的饮食文化。"
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: "闽菜的历史可以追溯到先秦时期。福建地区的多山丘陵和丰富的海洋资源为闽菜提供了丰富的食材基础。在战国时期，闽菜开始形成初步特色。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "唐宋时期，福建地区经济繁荣，与外部文化交流频繁。闽菜吸收了外来文化的影响，形成了更为多元的烹饪风格。同时，南宋时期福建沿海海上丝绸之路的兴盛也促使了海鲜等食材的广泛使用。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在这一时期，闽菜逐渐形成了独特的烹饪技法和菜品体系。闽菜注重食材的原汁原味，以清淡鲜美的口味著称。同时，闽南地区的特色小吃也开始在这个时期逐渐成形。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "进入近现代，福建地区的经济和文化蓬勃发展，闽菜在全国范围内得到更广泛的认可。福建的餐饮业开始进行创新，一些经典的闽菜菜品得到了新的演绎和推广。"
							},
							{
								title: '闽菜的文化特色',
								title_span: '',
								content: `1.	鲜美口感： 闽菜以鲜、嫩、爽为特色，追求食材的新鲜和口感，体现了海洋和山川的独特风味。
										<br />2.	创新烹饪技法： 闽菜注重刀工和烹饪技法，擅长巧妙的调味和火候掌握，突显食材的原汁原味。
										<br />3.	海鲜文化： 由于地理位置的优势，闽菜以丰富的海鲜为特色，各种独具创意的海鲜菜品成为福建餐桌上的佳肴。
										<br />4.	特色小吃： 闽南地区以特色小吃为主，如福州鱼丸、厦门沙茶面等，成为福建饮食文化的代表之一。
									<br />	5.	传统节庆： 闽菜在传统节庆中有着丰富的表现，一些传统的节庆菜品如年糕、鱼生等也是人们喜爱的传统美食。
										闽菜以其独特的地域特色和口味，成为中国饮食文化中的瑰宝，也是中华美食的重要组成部分。
										`
							},
						]
					},{
						class:"zc",
						icon:"../../static/bdcx/zc.png",
						iconjt:"../../static/bdcx/zcjt.png",
						status: false,
						text:"浙菜的发展历史",
						audiosrc:"../../static/yp/zhe.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "浙菜，中国八大菜系之一，起源于浙江省，经过千年的发展，形成了独特的饮食文化。"
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: " 浙江地区地势复杂，水域众多，为浙菜的发展提供了丰富的食材基础。先秦至战国时期，浙江地区的烹饪文化逐渐形成，起步于地方饮食的初步特色。"
							},
							{
								title: '秦汉时期',
								title_span: '',
								content: "在秦汉时期，浙江成为政治、文化中心，浙菜开始吸收外来文化的影响，形成了更为多元的菜系，特色鲜明的烹饪风格逐渐显现。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "唐宋时期，浙江地区成为繁荣的商业重镇，烹饪文化进一步繁荣。各类食材充足，技法精湛的浙菜开始在宴席上占据重要地位。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在元明清时期，浙江地区餐饮业得到进一步发展。清淡而不乏鲜明的味道，成为浙菜的代表性特征。尤其是杭州地区，形成了独特的宴席文化。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "近现代，浙江地区的烹饪业逐渐现代化，传统的浙菜在创新中焕发新的生机。一些经典的菜品在全国范围内也得到了广泛推广。"
							},
							{
								title: '浙菜的文化特色',
								title_span: '',
								content: `1.	清淡口味： 浙菜以清淡为主，注重食材的原汁原味，追求鲜嫩、爽口的风味，凸显了浙江地区水产丰富的特点。
									<br />2.	创新烹饪： 浙菜注重创新，擅长巧妙的烹饪技法和菜品搭配，突显菜品的层次和丰富口感。
									<br />3.	宴席文化： 杭州地区有着独特的宴席文化，以西湖宴为代表，讲究选材、刀工、火侯等方面的高要求，成为浙江餐饮文化的亮点。
									<br />4.	茶文化： 浙江茶文化与浙菜密不可分，深厚的茶文化在浙江地区形成了独特的饮食方式，茶席上的点心和小吃也成为了浙江饮食文化的一部分。
									<br />5.	本土特色： 不同地区的浙菜有着自己独特的特色，如嘉兴的醉蟹、宁波的宁海炖鸽，突显了地方特色。
									浙菜以其清淡爽口、技法精湛的特色，成为中国饮食文化中的瑰宝，也是中华美食的杰出代表。
									`
							},
						]
					},{
						class:"sc1",
						icon:"../../static/bdcx/sc.png",
						iconjt:"../../static/bdcx/scjt.png",
						status: false,
						text:"苏菜的发展历史",
						audiosrc:"../../static/yp/su.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "苏菜，中国八大菜系之一，起源于江苏省，经历了悠久的历史演变，形成了独特的饮食文化。"
							},
							{
								title: '战国时期-秦汉时期',
								title_span: '',
								content: "苏菜的渊源可以追溯到战国时期。江苏地区水网纵横，水产丰富，为苏菜的发展提供了得天独厚的条件。在秦汉时期，江苏地区的饮食文化逐渐形成初步特色。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "在唐宋时期，苏菜逐渐形成独具特色的烹饪风格。南京成为当时的政治和文化中心，苏菜开始受到更广泛的影响，呈现出独特的清淡口味和精湛的烹饪技艺。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在这一时期，苏菜得到了进一步的发展。以南京和苏州为代表的地方菜系逐渐形成，注重调味的清淡口感成为苏菜的代表性特点。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "进入近现代，苏菜逐渐融合了更多的元素。上海成为经济、文化中心，苏菜在现代烹饪技法和创新中有了更多的发展。"
							},
							{
								title: '苏菜的文化特色',
								title_span: '',
								content: `1.	清淡口味： 苏菜以清淡为主，注重原材料的鲜嫩口感，追求食材的自然滋味，体现了淡雅的烹饪风格。
											<br />2.	精致烹饪技法： 苏菜注重刀工和烹饪技法，擅长巧妙的切割和炖煮，讲究菜品的色、香、味的协调。
											<br />3.	点心文化： 苏菜以苏式点心为特色，包括小笼包、蟹黄汤包等，形成了独具特色的点心文化。
											<br />4.	宴席礼仪： 苏菜在宴席礼仪方面有独到之处，如“十大碗”、“卤菜十八样”等代表了苏菜宴席的独特形式。
											<br />5.	文人雅士： 苏菜承载了丰富的文人雅士文化，许多菜品都有深厚的历史典故，体现了江南文人的品位。
											<br />苏菜以其独特的烹饪风格和深厚的文化底蕴，成为中国饮食文化的一颗璀璨明珠，也是中华美食的杰出代表。
											`
							}
						]
					},{
						class:"lc",
						icon:"../../static/bdcx/lc.png",
						iconjt:"../../static/bdcx/lcjt.png",
						type:"1",
						status: false,
						text:"鲁菜的发展历史",
						audiosrc:"../../static/yp/lu.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "鲁菜是中国八大菜系之一，其发展历史悠久，可以追溯到先秦时期。以下是鲁菜发展的主要历史阶段："
							},
							{
								title: '先秦时期-战国时期',
								title_span: '',
								content: "鲁菜的发展起源于山东地区，最早的烹饪技艺逐渐形成。这一时期，山东地区丰富的海产品和农产品为鲁菜提供了丰富的食材基础。"
							},
							{
								title: '秦汉时期',
								title_span: '',
								content: "随着秦朝的统一，山东地区的鲁菜开始逐渐形成独特的特色。在这一时期，山东的饮食文化得到了更多的发展机遇。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "在唐宋时期，山东成为文化中心，鲁菜逐渐形成了较为完整的烹饪体系。山东的烹饪技艺日臻成熟，逐渐形成了一些代表性的鲁菜菜品。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在这一时期，鲁菜逐渐受到外来文化的影响，开始有了更为复杂的烹饪体系。一些具有代表性的鲁菜经典菜品，如孔庙饭、济南糖醋排骨等逐渐形成。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "在近现代，鲁菜在山东地区得到更广泛的传承和发扬。特别是20世纪初，一些著名的鲁菜餐馆崭露头角，推动了鲁菜的创新和发展。如今，鲁菜已经成为中华饮食文化的重要代表之一，受到了全国乃至全球食客的喜爱。"
							},
							{
								title: '鲁菜的文化特色',
								title_span: '',
								content: `鲁菜以其“清鲜淡雅、油而不腻”的独特口味而著称。其文化特色主要体现在以下几个方面：
										1.	山海之恩： 地理位置使山东既有丰富的海鲜，又有肥美的农产品，形成了“山海之恩”的独特风味。海鲜与山产品的完美搭配，是鲁菜独特的美食魅力。
										<br />2.	烹饪技法： 鲁菜注重刀工，追求烹饪的精湛技艺。炖、烧、煮等烹饪技法被广泛运用，保留食材的原汁原味。
										<br />3.	孔庙文化： 鲁菜与孔庙文化相互影响，孔庙饭等成为代表性菜品。孔庙饭体现了对传统文化的尊崇，是鲁菜文化的一部分。
										<br />4.	宴席文化： 鲁菜在宴席文化方面有着丰富的表现，丰富的宴席套餐使之成为庆典和聚会的首选。
										<br />鲁菜的文化特色在其独特的风味和烹饪技艺中得以充分展现，是中国饮食文化中不可或缺的一部分。
										`
							},
						]
					},{
						class:"hc",
						icon:"../../static/bdcx/hc.png",
						iconjt:"../../static/bdcx/hcjt.png",
						type:"1",
						status: false,
						text:"徽菜的发展历史",
						audiosrc:"../../static/yp/hui.mp3",
						content:[
							{
								title: '',
								title_span: '',
								content: "徽菜，中国八大菜系之一，起源于安徽省，经过漫长的历史发展，形成了独特的饮食文化。"
							},
							{
								title: '战国时期-秦汉时期',
								title_span: '',
								content: " 徽菜的渊源可以追溯到战国时期。安徽地区地势复杂，气候湿润，为徽菜的发展提供了丰富的食材基础。在秦汉时期，徽菜开始形成初步特色。"
							},
							{
								title: '唐宋时期',
								title_span: '',
								content: "在唐宋时期，安徽成为文化重镇，徽菜开始吸收中原文化的影响，形成了更为多元的菜系。徽菜的烹饪技法逐渐丰富，成为宴席上的重要代表。"
							},
							{
								title: '元明清时期',
								title_span: '',
								content: "在元明清时期，安徽地区的徽州菜系逐渐形成，徽菜的独特之处逐渐显现。注重选材和调味，徽菜以其独特的酱料和烹饪技法而闻名。"
							},
							{
								title: '近现代',
								title_span: '',
								content: "近现代，徽菜逐渐现代化，传统的徽州菜系在保留原有特色的基础上进行了创新。徽菜在全国范围内得到更广泛的认可。"
							},
							{
								title: '徽菜的文化特色',
								title_span: '',
								content: `
									1.	独特酱料： 徽菜以独特的酱料为特色，如徽州酱、秘制酱料等，为菜品赋予独特的风味。
									<br />2.	选料讲究： 徽菜注重选材，讲究食材的新鲜和原汁原味，追求菜品的质感和口感。
									<br />3.	炖煮技法： 徽菜擅长炖煮技法，讲究火候的掌握，使菜品更加入味。
									<br />4.	清淡口味： 徽菜以清淡为主，注重调味的平衡，突显食材的本真。
									<br />5.	宴席文化： 徽菜在宴席上表现出丰富多样的特色，注重宴席礼仪和场合搭配。
									<br />徽菜以其独特的烹饪风格和传统文化底蕴，成为中国饮食文化中的一颗璀璨明珠，也是中华美食的杰出代表。
								`
							}
						]
					}
				],
				yc:{
					class:"mc",
					icon:"../../static/bdcx/mc.png",
					iconjt:"../../static/bdcx/mcjt.png",
					audiosrc:"../../static/yp/yu.mp3",
					status: false,
					text:"豫菜的发展历史",
					content:[
							{
								title: '豫菜文化的丰厚底蕴',
								title_span: '',
								content: `
									豫菜是指河南省传统的烹饪文化，河南自古以来是华夏文明的发祥地之一，其丰富的历史和文化为豫菜的独特魅力提供了深厚的底蕴。`
							},
							{
								title: '发展历史',
								title_span: '',
								content: `
									河南的饮食文化可以追溯到古代，具有悠久的历史渊源。战国时期，河南地区已经形成了一些独特的烹饪风格，而在秦汉时期，随着经济的繁荣和文化的交流，河南的饮食文化进一步发展，豫菜开始呈现出初步的特色。
									在唐宋时期，河南地区成为文化的中心，这一时期的豫菜逐渐吸收中原文化的精华，形成了更为多元化的菜系。元明清时期，河南的烹饪技法日趋成熟，传统的豫菜得以传承。
									近现代，随着社会的发展和文化的交流，豫菜在全国范围内逐渐受到认可，也得到了一些创新和发展。`
							},
							{
								title: '豫菜的特色与知识',
								title_span: '',
								content: `
									1.	原料丰富： 豫菜注重选用当地的新鲜食材，如河南特有的黄河鲤鱼、信阳毛尖茶等，为豫菜赋予独特的风味。
									<br />2.	刀工精湛： 豫菜的烹饪技法以刀工见长，擅长切丝、切片、切块等技巧，使得菜肴更具美感。
									<br />3.	注重火候： 豫菜注重炖、焖、炸等烹饪技法，对火候的掌握非常讲究，以保持食材的原汁原味。
									<br />4.	清淡口味： 豫菜以清淡为主，强调调味的平衡，突显食材的鲜美和原始风味。
									<br />5.	独特汤料： 豫菜的汤料也是一大特色，如汤圆、豆腐羹等，为菜品增色不少。
									<br />豫菜文化的发展历程凝聚了河南人民的智慧和心血，是河南省丰富的非物质文化遗产之一。它的独特之处既体现在菜肴的口感和调味上，也表现在独具匠心的烹饪技法和传统文化的传承中。豫菜，是一道鲜明的地方文化符号，为中华饮食文化增光添彩。`
							},
						]
				},
				audiosrc:"",
				innerAudioContext:null,
				elementData:"",
				query:null,
				elementReady:false
			}
		},
		components: {
			timeLine
		},
		onPageScroll() {
			this.$refs.timeline.getScroll();
		},
		onLoad() {
			// this.audioPlay("/static/yp/yu.mp3")
			
		},
		mounted() {
		},
		methods: {
			// 切换导航
			changeTabs(index){
				this.tabIndex = index;
				this.elementReady = false;
				this.titles.forEach(ele => {
					ele.status = false;
				})
				this.menuList.forEach(ele => {
					ele.status = false;
				})
				this.yc.status = false;
				this.destRoyAudio()
			},
			// 切换古代详情页
			changeGdDetails(item) {
				const _this = this;
				_this.query = null;
				this.audioPlay(item.audiosrc)
				this.titles.forEach(ele => {
					if (ele.name == item.name) {
						ele.status = true;
						ele.gifStatus = true;
						_this.elementReady = false;
					} else {
						ele.status = false;
						ele.gifStatus = false;
					}
				})
				this.$nextTick(() => {
					_this.query = uni.createSelectorQuery().in(this);
				    _this.query.select(".bubble").boundingClientRect(function(res) {  
						_this.elementData = res;
					}).exec()  
				});		   
				setTimeout(function(){
					_this.elementReady = true;
				},200)
				setTimeout(function() {
					_this.titles.forEach(ele => {
						ele.gifStatus = false;
					})
				}, 1200);
			},
			changeMenuDetails(item){
				const _this = this;
				_this.query = null;
				this.audioPlay(item.audiosrc)
				this.menuList.forEach(ele => {
					ele.status = false;
					if (ele.class == item.class) {
						ele.status = !ele.status;
						_this.elementReady = false;
					}
				})
				this.$nextTick(() => {
					_this.query = uni.createSelectorQuery().in(this);
				    _this.query.select(".bubble1").boundingClientRect(function(res) {  
						_this.elementData = res;
					}).exec()  
				});		   
				setTimeout(function(){
					_this.elementReady = true;
				},200)
			},
			hideDetail(e){
				// console.log("this.elementReady",this.elementReady)
				if(!this.elementReady){
					return
				}
				let elementData = this.elementData;
				let x = e.detail.x;
				let y = e.detail.y;
				
				if(!(x >= elementData.left && x <= elementData.right && y>= elementData.top && y<=elementData.bottom)){
					this.titles.forEach(ele => {
						ele.status = false;
					})
					this.menuList.forEach(ele => {
						ele.status = false;
					})
					this.yc.status = false;
					this.elementReady = false;
					this.destRoyAudio()
				}else{
					this.elementReady = true;
				}
			},
			ycDetail(){
				const _this = this;
				this.audioPlay(this.yc.audiosrc)
				this.yc.status = !this.yc.status;
				_this.query = null;
				this.$nextTick(() => {
					_this.query = uni.createSelectorQuery().in(this);
				    _this.query.select(".bubble1").boundingClientRect(function(res) {  
						_this.elementData = res;
					}).exec()  
				});		   
				setTimeout(function(){
					_this.elementReady = true;
				},200)
			},
			destRoyAudio(){
				if(this.innerAudioContext){
					// this.innerAudioContext.stop();
					this.innerAudioContext.destroy()
				}
			},
			audioPlay(src){
				if(this.innerAudioContext){
					// this.innerAudioContext.stop();
					this.innerAudioContext.destroy()
				}
				this.innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext.autoplay = false;
				this.innerAudioContext.src = src;
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.play()
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			gifLoad(e){
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bubble {
		position: absolute;
		right: 60rpx;
		top: 0;
		width: 40vw;
		max-height: 80vh;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 1rpx 1rpx 1rpx 2rpx rgba(222, 189, 132, 0.2);
		z-index: 9999;
		overflow-y: scroll;
	}
	.bubble1{
		position: absolute;
		right: 30rpx;
		top: 0;
		width: 32vw;
		max-height: 60vh;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 1rpx 1rpx 1rpx 2rpx rgba(222, 189, 132, 0.2);
		z-index: 9999;
		overflow-y: scroll;
	}
	.bubble-top1 {
		top: -20vh;
		right: 36rpx;
	}

	.bubble-top2 {
		top: -35vh;
		right: 36rpx;
	}

	.menu-bubble0{
		top: -24vh;
	}
	.menu-bubble1{
		right: 95px;
		top: -25vh;
	}
	.menu-bubble2{
		right: 10px;
		top: -38vh;
	}
	.menu-bubble3{
		right: -88px;
		top: -38vh;
	}
	.menu-bubble4{
		right: -46px;
		top: -38vh;
	}
	.menu-bubble5{
		right: -42px;
		top: -32vh;
	}
	.menu-bubble6{
		right: 0px;
		top: -28vh;
	}
	.menu-bubble7{
		right: 0px;
		top: -24vh;
	}
	.menu-bubble-yc{
		right: -50rpx;
		top: -20vh;
	}
	.bubble::before {
		content: '';
		/* border: 7px solid;
		border-color: transparent transparent transparent #aaa;
		position: absolute;
		left: 100%;
		top: 18px; */
	}

	.content {
		height: 100vh;
		/* height: calc(100vh - 44px); */
		position: relative;
		// background-color: aqua;
	}
	// 导航切换
	.tabs{
		display: flex;
		position: absolute;
		border-radius: 2rpx;
		flex-direction: column;
		left: 2%;
		top: 5%;
		font-size: 13rpx;
		font-weight: bold;
		.tab-item{
			// width: 50rpx;
			padding: 8rpx 20rpx;
			text-align: left;
			// background-color:#eee;
			color: rgb(155,116,89);
			image{
				height: 50px;
			}
		}
		.active{
			border: 3rpx solid #fff;
			background-color: rgb(227,184,109);
			color: rgb(109,80,61);
			border-radius: 8rpx;
		}
	}
	.jt{
		width: 32rpx;
		height: 20rpx;
	}
	.cm-icon{
		width: 38rpx;
		height: 65rpx;
	}
	.sc{
		position: absolute;
		bottom:40%;
		left: 40%;
		image{
			position: absolute;
			&:nth-child(1){
				right: -6rpx;
				top: 8rpx;
			}
			&:nth-child(2){
				top: 8rpx;
				left: 8rpx;
			}
		}
	}
	.xc{
		border: 1px solid;
		position: absolute;
		bottom: 37%;
		left: 54%;
		image{
			position: absolute;
			&:nth-child(1){
				right: 4rpx;
				top: 9rpx;
			}
			&:nth-child(2){
				top: 0;
				left: 0rpx;
			}
		}
	}
	.yuec{
		border: 1px solid;
		position: absolute;
		bottom: 25.5%;
		left: 59%;
		image{
			position: absolute;
			&:nth-child(1){
				right: -36rpx;
				top:26rpx;
			}
			&:nth-child(2){
				top: 0;
				left: 13px;
				width: 10rpx;
				height: 22rpx;
			}
		}
	}
	.mc{
		position: absolute;
		bottom: 34%;
		left: 64%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 40rpx;
				top: 10rpx;
			}
			&:nth-child(2){
				top: 8rpx;
				left: 5rpx;
			}
		}
	}
	.zc{
		position: absolute;
		bottom: 44%;
		left: 68%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 45rpx;
				top: -15rpx;
			}
			&:nth-child(2){
				top: 16rpx;
				left: 10rpx;
				height: 10rpx;
			}
		}
	}
	.sc1{
		position: absolute;
		top: 44%;
		left: 64%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 38rpx;
				top: -55px;
			}
			&:nth-child(2){
				top: 20rpx;
				left: 25rpx;
				height:26rpx;
			}
		}
	}
	.lc{
		position: absolute;
		top: 32%;
		left: 56%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 40rpx;
				top: 35rpx;
			}
			&:nth-child(2){
				top: -30rpx;
				left: 0rpx;
			}
		}
	}
	.hc{
		position: absolute;
		top: 43%;
		left: 53%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 40rpx;
				top: 48rpx;
			}
			&:nth-child(2){
				top: 4rpx;
				left: -2rpx;
			}
		}
	}
	.yc{
		position: absolute;
		bottom: 54%;
		left: 61%;
		image{
			position: absolute;
			&:nth-child(1){
				left: 50rpx;
				top: -8rpx;
			}
			&:nth-child(2){
				top: 20rpx;
				left: 15rpx;
				height: 12rpx;
			}
		}
	}
	// 古代
	.gd {

		.card1 {
			position: absolute;
		}
		.card3 {
			position: absolute;
		}
		.card2{
			position: absolute;
		}
		uni-image {
			width: 60rpx;
			height: 70rpx;
		}

		.card1 {
			top: 15%;
			left: 49%;
		}

		.card2 {
			top: 30%;
			left: 45%;
		}

		.card3 {
			top: 46%;
			left: 56%;
		}

		.card2 image {
			width: 36rpx;
			height: 60rpx;
		}

		.card3 image {
			width: 36rpx;
			height: 60rpx;
		}
	}
</style>